<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>关于我们</title>
    <meta name="viewport" content="width=device-width,height=device-height, user-scalable=no,initial-scale=1, minimum-scale=1, maximum-scale=1,target-densitydpi=device-dpi ">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <style>
        body{
            width: 100vw;
            height: 100vh;
            overflow: hidden;
            text-align: center;
        }
        *{margin: 0;padding: 0}
        h1,h2,p{font-weight: normal;font-size: 16px;}
        h1{margin-top: 1rem;font-size: 22px;}
        h2{margin-top:6vh;line-height: 30px;letter-spacing:1PX;font-size: 16px;color: #5f5f5f }
        header{
            box-sizing: border-box;
            width: 100vw;
            height: 62vh;
            padding-top: 3.5rem;
        }
        header h1 label{
            color: #6f6f6f;
            font-size: 14px;
        }
        section{
            width: 100vw;
            height: 25vh;
            text-align: left;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content:center;
        }
        section p{
            box-sizing: border-box;
            margin-bottom: 1rem;
            text-align: center;
        }

        .icon1{

            background:url("img/tel.png") no-repeat;
        }
        .icon2{
            background:url("img/www.png") no-repeat;

        }
        .icon{
            background-size: cover;
            display: inline-block;
            width: 20px;
            height:20px;
            position: relative;
            top: 5px;
            margin-right: 0.4rem;
        }
        section label{
            display: inline-block;
            margin-right: 0.6rem;
            color: #6f6f6f;
            letter-spacing: 1px;
        }
        section a{
            display: inline-block;
            color:#5bcfff;
            text-decoration: none;
            border-bottom: 1px solid #5bcfff;
            width: 110px;
            position: relative;
            top:-2px;
            font-size: 15px;
        }
        footer{
            height: 10vh;
            width: 100%;
            color:#afafaf;
            box-sizing: border-box;

        }
        footer p{height: 30%;font-size: 12px;letter-spacing: 1px;box-sizing: border-box;}
        footer>div{height: 60%;width:95%;margin: auto;display: flex;align-items: center;justify-content: space-around;margin-bottom:0.2rem;}
        footer label{display:block;width:36%;height:0;border-bottom: 1px solid #c1c1c1;}
        footer img{
        }
        .layer{
            position: absolute;
            top: 0;
            left:0;
            width: 100vw;
            height: 100vh;
            z-index: 0;
            background: rgba(0,0,0,0.7);
            display: none;
            opacity: 0;
        }
        .qr{
            width: 10rem;
            height: 10rem;
            background: url("img/qrcode_for_gh_b43244ce53ee_1280.jpg") no-repeat;
            background-size: cover;
            position: absolute;
            left: 50%;
            top:50%;
            -webkit-transform: translate(-50%,-50%);
            -moz-transform: translate(-50%,-50%);
            -ms-transform: translate(-50%,-50%);
            -o-transform: translate(-50%,-50%) ;
            transform: translate(-50%,-50%);
            box-shadow: 0 0 20px rgba(255,255,255,0.9);
        }
        #qr_animate{
            display: block;
            opacity: 1;
            -webkit-animation:myfirst 1.6s ;
            -o-animation:myfirst 1.6s ;
            animation:myfirst 1.6s ;
        }
        @keyframes myfirst{
            0% {
                -webkit-transform: translateY(50vh) scale(0.1,0.1);
                -moz-transform: translateY(50vh) scale(0.1,0.1);
                -ms-transform: translateY(50vh) scale(0.1,0.1);
                -o-transform: translateY(50vh) scale(0.1,0.1);
                transform: translateY(50vh) scale(0.1,0.1);
                opacity: 0.6;

            }
            30%{
                -webkit-transform: translateY(0) scale(0.1,0.1);
                -moz-transform: translateY(0) scale(0.1,0.1);
                -ms-transform: translateY(0) scale(0.1,0.1);
                -o-transform: translateY(0) scale(0.1,0.1);
                transform: translateY(0) scale(0.1,0.1);
                opacity: 0.6;
            }
            100%{
                -webkit-transform: translateY(0) scale(1,1);
                -moz-transform: translateY(0) scale(1,1);
                -ms-transform: translateY(0) scale(1,1);
                -o-transform: translateY(0) scale(1,1);
                transform: translateY(0) scale(1,1);
                opacity: 1;
            }
        }
        -moz-@keyframes myfirst{
            0% {
                -webkit-transform: translateY(50vh) scale(0.1,0.1);
                -moz-transform: translateY(50vh) scale(0.1,0.1);
                -ms-transform: translateY(50vh) scale(0.1,0.1);
                -o-transform: translateY(50vh) scale(0.1,0.1);
                transform: translateY(50vh) scale(0.1,0.1);
                opacity: 0.6;

            }
            30%{
                -webkit-transform: translateY(0) scale(0.1,0.1);
                -moz-transform: translateY(0) scale(0.1,0.1);
                -ms-transform: translateY(0) scale(0.1,0.1);
                -o-transform: translateY(0) scale(0.1,0.1);
                transform: translateY(0) scale(0.1,0.1);
                opacity: 0.6;
            }
            100%{
                -webkit-transform: translateY(0) scale(1,1);
                -moz-transform: translateY(0) scale(1,1);
                -ms-transform: translateY(0) scale(1,1);
                -o-transform: translateY(0) scale(1,1);
                transform: translateY(0) scale(1,1);
                opacity: 1;
            }
        }
        -o-@keyframes myfirst{
            0% {
                -webkit-transform: translateY(50vh) scale(0.1,0.1);
                -moz-transform: translateY(50vh) scale(0.1,0.1);
                -ms-transform: translateY(50vh) scale(0.1,0.1);
                -o-transform: translateY(50vh) scale(0.1,0.1);
                transform: translateY(50vh) scale(0.1,0.1);
                opacity: 0.6;

            }
            30%{
                -webkit-transform: translateY(0) scale(0.1,0.1);
                -moz-transform: translateY(0) scale(0.1,0.1);
                -ms-transform: translateY(0) scale(0.1,0.1);
                -o-transform: translateY(0) scale(0.1,0.1);
                transform: translateY(0) scale(0.1,0.1);
                opacity: 0.6;
            }
            100%{
                -webkit-transform: translateY(0) scale(1,1);
                -moz-transform: translateY(0) scale(1,1);
                -ms-transform: translateY(0) scale(1,1);
                -o-transform: translateY(0) scale(1,1);
                transform: translateY(0) scale(1,1);
                opacity: 1;
            }
        }
        -webkit-@keyframes myfirst{
            0% {
                -webkit-transform: translateY(50vh) scale(0.1,0.1);
                -moz-transform: translateY(50vh) scale(0.1,0.1);
                -ms-transform: translateY(50vh) scale(0.1,0.1);
                -o-transform: translateY(50vh) scale(0.1,0.1);
                transform: translateY(50vh) scale(0.1,0.1);
                opacity: 0.6;

            }
            30%{
                -webkit-transform: translateY(0) scale(0.1,0.1);
                -moz-transform: translateY(0) scale(0.1,0.1);
                -ms-transform: translateY(0) scale(0.1,0.1);
                -o-transform: translateY(0) scale(0.1,0.1);
                transform: translateY(0) scale(0.1,0.1);
                opacity: 0.6;
            }
            100%{
                -webkit-transform: translateY(0) scale(1,1);
                -moz-transform: translateY(0) scale(1,1);
                -ms-transform: translateY(0) scale(1,1);
                -o-transform: translateY(0) scale(1,1);
                transform: translateY(0) scale(1,1);
                opacity: 1;
            }
        }
    </style>
</head>
<body>
<header >
    <img src="img/logo.png" alt="智慧城建" width="35%">
    <h1>智慧城建 <br/><label>版本号<span id="num">V1.0.0</span></label></h1>
    <h2>提高工作效率&nbsp;&nbsp;&nbsp;降低运营成本<br/>保障生产安全</h2>
</header>
<section>
    <div>
        <p><span class="icon1 icon"></span><label>热线:</label><a href="tel:400-8899-356" style="">400-8899-356</a></p>
        <p><span class="icon2 icon"></span><label>网站:</label><a href="http://www.escst.com">www.escst.com</a></p>
    </div>
</section>
<footer>
    <div>
        <label></label>
        <img id="qr_img" src="img/wx.png" alt="微信公众号" height="100%">
        <label></label>
    </div>
    <p>微信公众号:smart-construction</p>
</footer>
<div class="layer">
    <div class="qr"></div>
</div>
<script language="javascript" type="text/javascript">
    function getVersion(num){
        document.getElementById("num").innerHTML="V"+num;
    }
    document.getElementById("qr_img").onmouseup=function () {
        var layer=document.querySelector(".layer");
        layer.style.display="block";
        layer.setAttribute("id","qr_animate");
    }
    document.querySelector(".layer").onmouseup=function () {
        var layer=document.querySelector(".layer");
        layer.style.display="none";
        layer.setAttribute("id","");
    }

</script>



</body>
</html>